<template>
  <div class="Rdetail">
    <div class="content" v-if="chapter!= undefined">
      <div class="title"> 《{{$route.query.n}}》 - <span>第 {{chapter.chapter}} 章: &nbsp;{{chapter.title}}</span> </div>
      <div class="section">
        <img :src="chapter.content" alt="">
      </div>
    </div>
    <div class="prevNext">
      <p @click="prev()" v-show="prevShow"><i class="el-icon-arrow-up"></i><br/>上一章</p>
      <p @click="next()" v-show="nextShow">下一章<br/><i class="el-icon-arrow-down"></i></p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chapters: [],
      chapter: {},
      chapterIndex: 0,
      nextShow: true,
      prevShow: true
    }
  },
  created() {
    this.chapterIndex = this.$route.query.pid
    this.getDate()
  },
  methods: {
    getDate() {
      var _this = this
      this.$ajax.post('/api/getSections?cid='+ _this.$route.query.cid).then(function(response){
        if(response.data.code === 0){
          _this.chapters = response.data.data
          _this.setChapter(_this.chapterIndex)
        }else{
          _this.goindex()
        }
      }).catch(function(error){console.log(error)})
    },
    setChapter(pid){
      this.chapter = this.chapters[pid-1]
    },
    next(){
      if(this.chapterIndex+1<=this.chapters.length){
        this.setChapter(++this.chapterIndex)
        window.scrollTo(0,0)
      }
    },
    goindex(){
      this.$router.push('/index')
    },
    prev(){
      if(this.chapterIndex-1>0){
        this.setChapter(--this.chapterIndex)
        window.scrollTo(0,0)
      }
    }
  },
  watch: {
    chapterIndex(val){
      if(val===1){ this.prevShow = false}
      else {         this.prevShow =true       }
      if(val === this.chapters.length) { this.nextShow = false }
      else {         this.nextShow = true      }
    },
    chapter(val){
      if(val === undefined){
        this.$router.push('/index')
      }
    }
  }
}
</script>

<style scoped lang="stylus" rle="stylesheet/stylus">
.Rdetail
  width 100%
  .content
    margin 0 auto
    margin-top 40px
    margin-bottom 40px
    background-color #fff
    box-shadow 0 2px 12px 0 rgba(0,0,0,0.1)
    width 1004px
    .title
      font-size 18px
      margin-left 15px
      padding 8px 0
      color rgba(0,0,0,0.3)
      span
        font-size 15px
    .section
      width 100%
      img
        width 900px
        margin 25px 52px
  .prevNext
    right 60px
    bottom 40px
    position fixed
    p
      font-size 14px
      cursor pointer
      margin 20px 0
      i
        font-size 32px
        margin-left 4px
    p:hover
      color red  
</style>
